<template>
    <div class="container">
        <div class="mask"></div>
        <div class="art-text">车站艺术</div>
        <ul class="img">
            <li class="active">
                <img src="@/assets/img/station1.png" alt="">
                <div class="hr"></div>
                <p class="article">
                    西山万寿宫，江南著名的千年古观，道教三十六洞天之第十二洞天，七十二福地之三十八福地，为纪念东晋名道许逊而建，迄今已有1600余年的历史。坐落于南昌市新建区西山镇人民政府所在地，距南昌市区30千米。总占地面积31000平方米，始建于东晋太元元年（376年）。
                </p>
            </li>
            <li v-for="it in dataList.stationList" :key="it.id">
                <img :src="require('@/assets/img/station'+(it.id+1)+'.png')">
                <div class="hr"></div>
                <p class="article">
                    {{it.description}}
                </p>
            </li>
        </ul>
        <ul class="btn">
            <li @click="change(0)"><span>万寿宫</span></li>
            <li v-for="it in dataList.stationList" :key="it.id" @click="change(it.id)">
                <span>{{it.station}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
    import $ from 'jquery'
    import {get_art_data_API} from "@/utils/apis";
    import {reactive} from "@vue/reactivity";

    export default {
        name: "StationArt",
        setup() {
            let dataList = reactive({
                stationList: []
            })

            //定义初始化方法
            async function init() {
                const {data: result} = await get_art_data_API()
                dataList.stationList = result
                console.log(dataList.stationList)
            }

            //调用初始化方法
            init()

            const move = () => {
                //移动按钮
                $(".btn").css({
                    "left": "-50px"
                })
                setTimeout(() => {
                    //移动回来
                    $(".btn").css({
                        "left": "50px"
                    })
                }, 500)
                setTimeout(() => {
                    $(".btn").css({
                        "left": "0px"
                    })
                }, 1000)
            }
            const change = (id) => {
                console.log("点击了按钮" + id)
                move()
                let imgs = $(".img").children()
                console.log("len : " + imgs.length)
                //隐藏所有的元素
                for (let j = 0; j < imgs.length; j++) {
                    $(imgs[j]).fadeOut(800)
                }
                //显示该元素
                $(imgs[id]).fadeIn(1000)
            }
            return {
                dataList, change
            }
        },
    }
</script>

<style scoped lang="less">
    .container {
        margin: 100px auto;
        width: 1200px;
        height: 672px;
        position: relative;
        overflow: hidden;
    }

    .container .mask {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #00000066;
        z-index: 1;
    }

    .container .art-text {
        position: absolute;
        line-height: 60px;
        padding-left: 30px;
        left: 50px;
        top: 50px;
        color: white;
        font-size: 40px;
        border-left: 5px solid #e6a704;
        z-index: 1;
    }

    .container .img li {
        list-style: none;
        display: none;
    }

    .container img {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;
    }

    .container .hr {
        position: absolute;
        top: 60px;
        right: 550px;
        z-index: 2;
        width: 80px;
        height: 4px;
        background-color: #e6a704;
    }

    .container .article {
        position: absolute;
        top: 80px;
        right: 80px;
        width: 550px;
        z-index: 1;
        color: white;
        font-size: 14px;
        line-height: 20px;
    }

    .container .img .active {
        display: block;
    }

    .container .btn {
        width: 100%;
        height: 150px;
        position: absolute;
        z-index: 1;
        bottom: 70px;
        display: flex;
        background-image: url("../../assets/img/line.png");
        background-position: center;
        background-repeat: no-repeat;
        transition: 1s;
    }

    .container .btn li {
        list-style: none;
        border: 2px solid white;
        background-color: #000;
        background-image: url("../../assets/img/point.png");
        background-size: 10px 10px;
        background-position: center;
        background-repeat: no-repeat;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        border-radius: 12px;
    }

    .container .btn li span {
        position: absolute;
        width: 20px;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        color: white;
        top: 30px;
        left: 0px;
    }

    .container .btn li:nth-child(5) span {
        top: 90px;
        left: 29px;
        border-radius: 80px;
    }

    .container .btn li:nth-child(1) {
        position: absolute;
        top: 36px;
        left: 100px;
    }

    .container .btn li:nth-child(2) {
        position: absolute;
        top: 47px;
        left: 225px;
    }

    .container .btn li:nth-child(3) {
        position: absolute;
        top: 74px;
        left: 350px;
    }

    .container .btn li:nth-child(4) {
        position: absolute;
        top: 90px;
        left: 475px;
    }

    .container .btn li:nth-child(5) {
        position: absolute;
        width: 80px;
        height: 80px;
        border-radius: 42px;
        top: 60px;
        line-height: 80px;
        left: 566px;
        background-image: url("../../assets/img/center.png");
        background-size: cover;
    }

    .container .btn li:nth-child(6) {
        position: absolute;
        top: 78px;
        left: 725px;
    }

    .container .btn li:nth-child(7) {
        position: absolute;
        top: 53px;
        left: 850px;
    }

    .container .btn li:nth-child(8) {
        position: absolute;
        top: 37px;
        left: 975px;
    }

    .container .btn li:nth-child(9) {
        position: absolute;
        top: 47px;
        left: 1100px;
    }
</style>